<template>
  <div class="error-container">
    <div class="error-content">
      <div class="pic-error">
        <img src="../../assets/images/404.png" alt="">
      </div>
      <div class="bullshit">
        <!-- <div class='bullshit-oops'>实在抱歉！页面一不小心跑丢了···</div> -->
        <div class="bullshit-oops">抱歉！</div>
        <div class="bullshit-headline">页面一不小心跑丢了···</div>
        <div class="bullshit-info">请检查您输入的网址是否正确，或点击下面的按钮返回首页</div>
        <div class="bullshit-return-home" @click="gohome">{{ countDown }}s&nbsp;返回首页</div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: '', //倒计时
      timer: null
    }
  },
  created() {
    this.timerChange()
  },
  methods: {
    gohome() {
      this.$router.push({ name: 'home' })
    },
    timerChange() {
      const TIME_COUNT = 5
      if (!this.timer) {
        this.countDown = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.countDown > 1 && this.countDown <= TIME_COUNT) {
            this.countDown--
          } else {
            //清除定时器
            clearInterval(this.timer)
            this.$router.push({ name: 'home' })
          }
        }, 1000)
      }
    }
  }
}
</script>

<style>
body {
  background: #fff;
}
.error-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.error-content {
  width: 100%;
  height: 100%;
}
.error-content .pic-error {
  position: absolute;
  top: 40%;
  left: 35%;
  transform: translate(-50%, -50%);
}
.error-container .bullshit {
  position: absolute;
  top: 40%;
  right: 13%;
  transform: translate(-50%, -50%);
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.error-container .bullshit-oops {
  margin-bottom: 20px;
  font-size: 34px;
  font-weight: bold;
  line-height: 40px;
  color: #2d51e6;
  /* opacity: 0; */
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.error-container .bullshit-headline {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  line-height: 24px;
  color: #222;
  /* opacity: 0; */
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

.error-container .bullshit-info {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 21px;
  /* color: #41b584; */
  /* opacity: 0; */
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}

.error-container .bullshit-return-home {
  width: 110px;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #2d51e6;
  border-radius: 100px;
  /* opacity: 0; */
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  text-decoration: none;
}

@keyframes cloudLeft {
  0% {
    top: 17px;
    left: 220px;
    opacity: 0;
  }
  20% {
    top: 33px;
    left: 188px;
    opacity: 1;
  }
  80% {
    top: 81px;
    left: 92px;
    opacity: 1;
  }
  100% {
    top: 97px;
    left: 60px;
    opacity: 0;
  }
}
</style>
